<template>
  <border
    class="customer-satisfaction"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <div class="module-left">
        <bar-line ref="barLine"
                  :title="barLineConfig.title"
                  :axis="barLineConfig.axis"
                  :xAxis="barLineConfig.xAxis"
                  :yAxis="barLineConfig.yAxis"
                  :dataZoom="barLineConfig.dataZoom"
                  :grid="barLineConfig.grid"
                  :config="barLineConfig.config"
                  :tooltipsConfig="barLineConfig.tooltipsConfig"
                  :seriesData="barLineConfig.seriesData"></bar-line>
      </div>
      <div class="module-right">
        <single-ring ref="singleRing" :singleData="singleRingConfig.singleData" :title="singleRingConfig.title"></single-ring>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import BarLine from './../components/BarLine.vue'
import SingleRing from './../components/SingleRing.vue'
export default {
  name: 'customerSatisfaction',
  components: {
    Border,
    BarLine,
    SingleRing
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '客户满意度',
        goPageUrl: ''
      },
      barLineConfig: {
        title: {
          text: '近一年客服月度满意率'
        },
        axis: {
          yAxisConversion: '%', // Y轴坐标%
          xAxisDataType: 1, // X轴坐标从当前月份开始
          xAxisLabelInterval (index, name) {
            if (index % 2 === 1) {
              return name
            }
          }
        },
        dataZoom: {
          show: false,
          right: 10,
          endValue: 12
        },
        grid: {
          top: 40,
          bottom: 20
        },
        config: {
          barWidth: 20
        },
        xAxis: {
          axisLabel: {
            interval: 'auto'
          },
          data: []
        },
        yAxis: {
          splitLine: {
            show: false
          }
        },
        tooltipsConfig: {
          tipsColor: ['#b60d81'],
          isNearlyYear: true,
          symbol: '%'
        },
        seriesData: []
      },
      singleRingConfig: {
        singleData: '',
        title: '本月满意度'
      },
      apiData: {},
      refreshInterval: 0
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        this.parkApi.getSatisfiedRateInfo({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            let data = res.data.data
            this.apiData = data
          } else {
            this.apiData = {}
            this.$parent.showTips('请求失败，点击确认继续刷新')
          }
          if (!isRefresh) {
            this.handleData()
          }
        }, res => {
          this.apiData = {}
          this.$parent.showTips('请求失败，点击确认继续刷新')
          if (!isRefresh) {
            this.handleData()
          }
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.apiData
      let seriesData = []
      let singleData = 0
      if (JSON.stringify(data) !== '{}') {
        data.hisMths.forEach(item => {
          seriesData.push(item.hisRate.indexOf('%') > -1 ? item.hisRate.replace('%', '') : 0)
        })
        singleData = parseInt(data.mthRate.replace('%', ''))
      }
      this.barLineConfig.seriesData = [
        {
          data: seriesData,
          name: '',
          colorIndex: 1
        }
      ]
      this.singleRingConfig.singleData = singleData
    },
    resizeChart () {
      this.$refs.barLine.resizeChart()
      this.$refs.singleRing.resizeChart()
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.customerSatisfactionTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.customerSatisfactionTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.customerSatisfactionTimer)
  }
}
</script>
<style lang="scss" scoped>
.customer-satisfaction {
  .module-content {
    width: 100%;
    height: 100%;
  }
  .module-left {
    width: 70%;
    height: 100%;
    float: left;
  }
  .module-right {
    width: 30%;
    height: 65%;
    transform: translate(0, 46%);
    float: left;
    position: relative;
    & /deep/ .singleRing-title {
      position: absolute;
      left: 0;
      bottom: 4%;
      color: #fff;
    }
  }
}
</style>
